<template>
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form :form="form" slot="detail">
          <a-row>

            <a-col :span="24" >
              <a-form-item label="司机姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['sijixingming']" placeholder="请输入司机姓名" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24" >
              <a-form-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['chepaihao']" placeholder="请输入车牌号" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24" >
              <a-form-item label="公司名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-decorator="['gongsimingcheng',validatorRules.gongsimingcheng]" placeholder="请输入领用人姓名" >
                  <a-select-option v-for="item in RenyuanList" :value="item">{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24" >
              <a-form-item label="出库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date :show-time="true" placeholder="请选择出库时间" date-format="YYYY-MM-DD HH:mm:ss" v-decorator="['lingyongshijian',validatorRules.lingyongshijian]" :trigger-change="true" style="width: 100%" />
              </a-form-item>
            </a-col>

          </a-row>
        </a-form>
      </j-form-container>
        <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="领用申请子表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="yzdLingyongshenqingZiTable.loading"
            :columns="yzdLingyongshenqingZiTable.columns"
            :dataSource="yzdLingyongshenqingZiTable.dataSource"
            :maxHeight="300"
            :disabled="formDisabled"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true">
          
            <template v-slot:action="props">  
              <div >
              <a-select style="width: 175px" :default-value="props.value"   @change="(value)=> setpicihao(value,props)">
                  <a-select-option v-for="item in huojiahaolist" :value="item" :trigger-change="true"  >
                    {{ item }} 
                </a-select-option>
              </a-select>
            </div> 
            </template>      
            
            
            <template v-slot:action1="props">  
              <div >
              <a-select style="width: 175px" :default-value="props.value"   @change="(value)=> sethuaxuepin(value,props)">
                  <a-select-option v-for="item in select" :value="item" :trigger-change="true"  >
                    {{ item }} 
                </a-select-option>
              </a-select>
            </div> 
            </template>  
  
  
            <template v-slot:action2="props">  
              <div >
              <a-select style="width: 175px" :default-value="props.value"   @change="(value)=> setcangkumingcheng(value,props)">
                  <a-select-option v-for="item in cangkuminghceng" :value="item" :trigger-change="true"  >
                    {{ item }} 
                </a-select-option>
              </a-select>
            </div> 
            </template>

            <template v-slot:action4="props">
              <div>
                <a-select style="width: 175px"
                          @change="(value)=> setdanwei(value,props)">
                  <a-select-option v-for="item in danwei" :value="item.value"
                                   :trigger-change="true" :key="item.value">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
                <!-- <j-dict-select-tag type="list" style="width: 175px"
                    @change="(value)=> setdanwei(value,props)" dictCode="danwei"
                    placeholder="请选择到货方式" /> -->
              </div>
            </template>
          
          
          </j-editable-table>
        </a-tab-pane>
      </a-tabs>
      <a-row v-if="showFlowSubmitButton" style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提 交</a-button></a-row>
    </a-spin>
  </template>
  
  <script>
  
    import pick from 'lodash.pick'
    import { getAction } from '@/api/manage'
    import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
    import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
    import { validateDuplicateValue } from '@/utils/util'
  import { postAction } from '../../../api/manage'
  
    export default {
      name: 'YzdLingyongmingxiForm',
      mixins: [JEditableTableMixin],
      components: {
      },
      data() {
        return {
          RenyuanList: [],
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
          labelCol2: {
            xs: { span: 24 },
            sm: { span: 3 },
          },
          wrapperCol2: {
            xs: { span: 24 },
            sm: { span: 20 },
          },
          // 新增时子表默认添加几行空数据
          addDefaultRowNum: 1,
          validatorRules: {
            huaxuepinmingcheng: {
            rules: [
              { required: true, message: '请选择货物名称!' },
            ]
          },
          lingyongrenxingming: {
            rules: [
              { required: true, message: '请输入领用人姓名!' },
            ]
          },
          lingyongshijian: {
            rules: [
              { required: true, message: '请选择领用时间!' },
            ]
          },
          },
          refKeys: ['yzdLingyongshenqingZi', ],
          tableKeys:['yzdLingyongshenqingZi', ],
          activeKey: 'yzdLingyongshenqingZi',
          // 领用申请子表
          yzdLingyongshenqingZiTable: {
            loading: false,
            dataSource: [],
            columns: [
              {
                title: '物料编码',
                key: 'wuliaobianma',
                type: FormTypes.input,
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },
              {
                title: '货物名称',
                key: 'huaxuepinmingcheng',
                type: FormTypes.slot,
                slotName:'action1',
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },
             /* {
                title: '仓库名称',
                key: 'cangkumingcheng',

                type: FormTypes.slot,
                slotName:'action2',
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },*/

              /*  {
                  title: '领用重量(克)',
                  key: 'picihao',
                  type: FormTypes.input,
                  // slotName: 'action',
                  width:"200px",
                  placeholder: '请输入${title}',
                  defaultValue:'',
                },*/
              {
                title: '出库重量',
                key: 'zhongliang',
                type: FormTypes.input,
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },
              {
                title: '单位',
                key: 'danwei',
                type: FormTypes.slot,
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },
              {
                title: '物料类别',
                key: 'wuliaoleibie',
                type: FormTypes.input,
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },
              {
                title: 'PB号',
                key: 'pbhao',
                type: FormTypes.input,
                width:"200px",
                placeholder: '请输入${title}',
                defaultValue:'',
              },
            ]
          },
          url: {
            getpicihao: '/yzd_lingyongmingxi/yzdLingyongmingxi/getByHuaxuepinAndCangku',
            huojihao: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/findhuojiahao",
            cangkumingcheng:"/yzd_jichuxinxi/yzdZhucuncangkuxinxi/huoQuCangKu",
            xialakuang: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/list",
            add: "/yzd_lingyongmingxi/yzdLingyongmingxi/add",
            danwei: "/sys/dict/getDictItems/danwei",
            edit: "/yzd_lingyongmingxi/yzdLingyongmingxi/edit",
            queryById: "/yzd_lingyongmingxi/yzdLingyongmingxi/queryById",
            yzdLingyongshenqingZi: {
              list: '/yzd_lingyongmingxi/yzdLingyongmingxi/queryYzdLingyongshenqingZiByMainId'
            },
            renyuanurl:"/menjin/menjinrenyuan/list"
          },
          select: [],
        cangkuminghceng:[],
        pingshu: '',
          danwei: [],
        huojiahaolist: [],
        cangkuming: '',
        huaxuepinming: '',
  
        }
      },
      props: {
        //流程表单data
        formData: {
          type: Object,
          default: ()=>{},
          required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
          type: Boolean,
          default: false,
          required: false
        },
        //表单禁用
        disabled: {
          type: Boolean,
          default: false,
          required: false
        }
      },
      computed: {
        formDisabled(){
          if(this.formBpm===true){
            if(this.formData.disabled===false){
              return false
            }
            return true
          }
          return this.disabled
        },
        showFlowSubmitButton(){
          if(this.formBpm===true){
            if(this.formData.disabled===false){
              return true
            }
          }
          return false
        }
      },
      created () {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
      this.getselect();
      this.getCangkumingcheng()
      this.huojiahaolist = []
      this.getrenyuan()
        this.getdanwei();
      },
      methods: {
        getdanwei() {
          getAction(this.url.danwei).then(res => {
            this.danwei = res.result;
          })
        },
        getrenyuan(){
        getAction(this.url.renyuanurl).then(res => {
          console.log(res);
          res.result.records.forEach(element => {
            this.RenyuanList.push(element.name);
            
          })
        })
        
      },
  
  
  
        setcangkumingcheng(arr,row){
          this.cangkuming= arr
          this.huojiahaolist= []; 
          var re = {
            "cangkumingchedng":this.cangkuming,
            "huaxuepinmingcheng": this.huaxuepin
          }
          postAction(this.url.getpicihao,re).then(res => {
            console.log(res);
            res.result.forEach(element => {
              this.huojiahaolist.push(element.picihao)
            })
          })
          this.$refs.yzdLingyongshenqingZi.setValues([{ 'rowKey': row.rowId,values:{
            'cangkumingcheng':arr
          }}]);
        },
        setdanwei(value, props) {
          this.$refs.yzdLingyongshenqingZi.setValues([{
            'rowKey': props.rowId, values: {
              'danwei': value
            }
          }]);
        },
      sethuaxuepin(arr,row){
        this.huaxuepin = arr
        this.$refs.yzdLingyongshenqingZi.setValues([{ 'rowKey': row.rowId,values:{
        'huaxuepinmingcheng':arr
       }}]);
      },
      
      setpicihao(arr,row){
       this.$refs.yzdLingyongshenqingZi.setValues([{ 'rowKey': row.rowId,values:{
        'picihao':arr
       }}]);
      },
  
      huoqupingshu(arr){
        this.pingshu = arr
      },
  
  
      getCangkumingcheng(){
        getAction(this.url.cangkumingcheng).then((res)=>{
            res.result.forEach(element => {
              this.cangkuminghceng.push(element.cangkumingcehng)
            });
        })
      },
  
      getselect() {
        getAction(this.url.xialakuang).then((res) => {
          res.result.records.forEach(element => {
              this.select.push(element.huaxuepinmingcheng)
            });
        })
  
      },
        
        addBefore(){
          this.form.resetFields()
          this.yzdLingyongshenqingZiTable.dataSource=[]
        },
        getAllTable() {
          let values = this.tableKeys.map(key => getRefPromise(this, key))
          return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
          let fieldval = pick(this.model,'huaxuepinmingcheng','huaxuepindaima','lingyongzhuangtai','lingyongrenxingming','lingyongshijian','liyongrenbumen','lingyongpicihao','lingyongliang','jiliangdanwei','zhucunweizhi','lingyongshenqingpaizhao','lingyongchengzhongpaizhao','lingyongrenqianming','lingyongwanchengpaizhao','lingyongyongtu','youxiaoqi','daoqishijian','cangkumingchedng','gongsimingcheng','sijixingming','chepaihao')
          this.$nextTick(() => {
            this.form.setFieldsValue(fieldval)
          })
          // 加载子表数据
          if (this.model.id) {
            let params = { id: this.model.id }
            this.requestSubTableData(this.url.yzdLingyongshenqingZi.list, params, this.yzdLingyongshenqingZiTable)
          }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
          allValues.formValue.huaxuepinmingcheng=allValues.formValue.huaxuepinmingcheng.toString()
          let main = Object.assign(this.model, allValues.formValue)
          
          return {
            ...main, // 展开
            yzdLingyongshenqingZiList: allValues.tablesValue[0].values,
          }
        },
        //渲染流程表单数据
        showFlowData(){
          if(this.formBpm === true){
            let params = {id:this.formData.dataId};
            getAction(this.url.queryById,params).then((res)=>{
              if(res.success){
                this.edit (res.result);
              }
            })
          }
        },
        validateError(msg){
          this.$message.error(msg)
        },
       popupCallback(row){
         this.form.setFieldsValue(pick(row,'huaxuepinmingcheng','huaxuepindaima','lingyongzhuangtai','lingyongrenxingming','lingyongshijian','liyongrenbumen','lingyongpicihao','lingyongliang','jiliangdanwei','zhucunweizhi','lingyongshenqingpaizhao','lingyongchengzhongpaizhao','lingyongrenqianming','lingyongwanchengpaizhao','lingyongyongtu','youxiaoqi','daoqishijian','cangkumingchedng','gongsimingcheng','sijixingming','chepaihao'))
       },
  
      }
    }
  </script>
  
  <style scoped>
  </style>